<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<br>
		<input id="s_btn" type="button" value="缩小" />
		<input id="b_btn" type="button" value="放大" />
		<script type="text/javascript">
			var canvas = document.getElementById("canvas")
			var cxt = canvas.getContext('2d')
			cxt.fillStyle = "chocolate"
			cxt.fillRect(30, 30, 50, 50)
			//缩放图形
			// cxt.scale(1.5,1.5)
			// cxt.fillStyle="palegreen"
			// cxt.fillRect(30, 30, 50, 50)
			var scale_btn = document.getElementById("s_btn")
			scale_btn.onclick = function() {
				// cxt.clearRect(0, 0, canvas.width, canvas.height)
				cxt.scale(0.5, 0.5)
				cxt.fillRect(30, 30, 50, 50);
			}
			var move_btn = document.getElementById("b_btn")
			move_btn.onclick = function() {
				// cxt.clearRect(0, 0, canvas.width, canvas.height)
				cxt.scale(1.5, 1.5)
				cxt.fillRect(30, 30, 50, 50);
			}
		</script>
	</body>
</html>
